import React from 'react'
import classnames from 'classnames';
import { Popconfirm } from 'antd';

import styles from '../style.less'

/**
 *已选图表
 * @param dataList
 * @param delHandle
 * @param delAllHandle
 */
const useAlreadyChoose = (dataList = [], delHandle, delAllHandle) => {
    const chooseList = dataList.filter(item => item.isEnable)
    return {
        render() {
            return (
                <div className={styles.chooseMain}>
                    <span className={styles.leftLabel}>已选：</span>
                    <div>
                        {
                            chooseList.map(item => (
                                <span className={styles.chooseItem} key={item.globalType}>
                                    {item.globalName}
                                    <i className={classnames('icon', 'iconfont', 'iconcancel_o', styles.delIcon)} onClick={() => delHandle(item)}></i>
                                </span>
                            ))
                        }
                    </div>
                    {
                        chooseList.length ?
                            <Popconfirm title="确认清空所选表格吗" onConfirm={delAllHandle} okText="确定" cancelText="取消">
                                <i
                                    className={classnames('icon', 'iconfont', 'iconDeleteIcon', styles.emptyIcon)}
                                />
                            </Popconfirm> : null
                    }
                </div>
            );
        }
    }
};

export default useAlreadyChoose;
